<template>
  <view>
    <!-- 搜索框 -->
    <yg-search />
    <view class="content">
      <view class="menu">
        <view
          :class="['menu-item', current === index ? 'active' : '']"
          v-for="(item, index) in menu"
          :key="item"
          @click="handleChangeSelected(index)"
          >{{ item }}</view
        >
      </view>
      <view class="goods">
        <view class="good-group" v-for="good in goodsList" :key="good.cat_name">
          <!-- 标题  -->
          <view class="goods-title"> {{ good.cat_name }}</view>
          <view class="good-content">
            <navigator
              :url="`/pages/goods-list/goods-list?cid=${item.cat_id}`"
              v-for="item in good.children"
              :key="item.cat_id"
            >
              <u-image :src="item.cat_icon" mode="widthFix" width="100%" />
              <text>{{ item.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/* 
在uniapp中 如下规定
  1 如果在 data中定义过变量
    1 肯定全局变量 可以在任意地方  this.xx 方式来使用
    2 这个变量编译到小程序的时候，会被存放在小程序data -  在标签中直接使用

  2 如果没有在data中定义 变量   而是在 其他地方直接  写 this.xxx
    1 接受  this.xxx 也是全局变量
    2 不会把这个数据 编译到小程序data中， 在标签中 无法使用它！！！


  3 如果我在uniapp中只想要使用 页面级别的全局变量 
    1 直接 this.xx 来定义 和 使用即可 不需要故意在data中先声明
    2 在data中声明的变量 一定要在 标签中 直接用上 


 */
export default {
  data () {
    return {
      // 左侧标题数组
      menu: [],
      // 右侧商品数组
      goodsList: [],
      // 选择的下标
      current: 0
    }
  },
  async onLoad () {
    const res = await this.$u.get('/categories')
    console.log(res)
    this.categoryData = res.message
    // 构造左侧标题数组 
    this.menu = this.categoryData.map(item => item.cat_name)
    // 获取右侧商品数组
    this.goodsList = this.categoryData[0].children
  },
  methods: {
    handleChangeSelected (i) {
      this.current = i
      this.goodsList = this.categoryData[i].children
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  height: calc(100vh - 94rpx);
  display: flex;
  .menu {
    width: 182rpx;
    overflow: auto;
    .menu-item {
      font-size: 28rpx;
      height: 72rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &.active {
        color: #ea4350;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 3px;
          height: 80%;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background-color: #ea4350;
        }
      }
    }
  }
  .goods {
    flex: 1;
    overflow: auto;
    .goods-title {
      font-size: 26rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        color: #ccc;
        content: '/';
        margin-right: 20rpx;
      }
      &::after {
        content: '/';
        color: #ccc;
        margin-left: 20rpx;
      }
    }
    .good-content {
      display: flex;
      flex-wrap: wrap;
      navigator {
        width: 33.33%;
        padding: 15rpx;
        text-align: center;
      }
    }
  }
}
</style>